<html>
<head>
    <title>分页</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        var pageIndex = 1; //默认第一页
        var pageSize = 10;//每页显示条数
        var totalPage = 0; //总页数
        var totalCount = 0; //总条数
        $(function () {
            skipPage(pageIndex);
        });
        //处理跳转页面
        function skipPage(pageNum) {
            pageIndex = pageNum;
            //发出获取数据的请求
            $.get('/page_test_'+pageIndex+'_'+pageSize,function (data) {
                var result=data.result;
                if(result == 'Success'){
                    //将页码  每页条数  总条数，总页数与服务器响应的数据同步
                    pageIndex=data.pageIndex;
                    pageSize=data.pageSize;
                    totalPage=data.totalPage;
                    totalCount=data.totalCount;

                    //把data.message字符串转换为json对象
                    json=JSON.parse(data.message);

                    $('#table').empty();

                    //添加头
                    $('#table').append($('<tr>' +
                            '<td>ID</td>' +
                            '<td>名称</td>' +
                            '</tr>'));

                    //解析数据
                    $.each(json,function (i,item) {
                        //创建
                        $tr = $('<tr>' +
                            '<td>' + item.pk + '</td>' +
                            '<td>' + item.fields.atitle + '</td>' +
                            '</tr>');
                        //追加内容
                        $('#table').append($tr);
                    });


                    //清空原来的数据
                    $('#nav').empty();
                    $html="";
                    //创建分页标签
                    for(var i=1;i<=totalPage;i++){
                        if(i== pageIndex){
                            $html+="<a>"+i+"</a>&nbsp;&nbsp;";
                        }else{
                            $html+="<a href='javascript:void(0)' onclick=skipPage("+i+")>"+i+"</a>&nbsp;&nbsp;";
                        }
                    }
                    //追加内容
                    $('#nav').append($html);

                }
            });
        }
    </script>
</head>
<body>
    <div align="center">
        <table id="table" border="2" style="width: 50%">
        </table>
    </div>
    <br>
    <hr>
    <div id='nav' align="center"></div>
</body>
</html>